<template>
	<view class="view_box">
		<loading-view v-if="isShowLoadingView"></loading-view>
		<view v-if="deliveryList" class="member_box1 flex-col" :style="'position: relative;'">
			<view v-for="(delivery, index) in deliveryList" :key="index" class="goods_info">
				<view class="content">
					<view class="goods">
						<view v-for="(item, i) in delivery.send_goods_arr" :key="i" class="item-wrap">
							<view class="item m-b-20 m-t-10 flex" @click="jumpGoods(item)">
								<view class="goods-img">
									<u-image width="150rpx" border-radius="10rpx" height="150rpx" lazy-load
										:src="item.image"></u-image>
								</view>
								<view class="goods-info m-l-20 flex-1">
									<view class="goods-name line-2 m-b-10">
										{{item.goods_name || item.name}}
									</view>
									<view class="goods-spec xs muted m-b-20">
										{{item.spec_value}} &nbsp;&nbsp;  {{item.bar_code}}</view>
									<view class="flex row-between">
										<view class="goods-num">购买数量：{{item.num || item.goods_num || item.count}}</view>
										<view class="goods-num">发货数量：{{item.this_send_num}}</view>
									</view>
								</view>
							</view>
						</view>
					</view>
					
					<view class="info_title p-b-20">
						<view class="flex row">
							<view class="row_text">快递公司：</view>
							<view>{{delivery.shipping_name}} </view>
						</view>
						<view class="flex row-between">
							<view class="flex row">
								<view class="row_text">快递单号：</view>
								<view>{{delivery.invoice_no}}</view>
							</view>
							<view class="row_text"><router-link
								:to="{path: '/bundle/pages/goods_logistics/goods_logistics', query: {delivery_id: delivery.id, id:delivery.order_id}}">
								  <button class="xxs primary  p-l-20 p-r-20" type="primary">查看物流</button>
							</router-link>
							 </view>
						</view>
						
						<view class="flex row-between">
							<view class="flex row" style="justify-content: flex-start; align-items: flex-start;">
								<view class="row_text">收货信息：</view>
								<view style="width: 450rpx;">{{delivery.consignee}}，{{delivery.mobile}} <br>
								{{delivery.delivery_address}}</view>
							</view>
							<view><button class="xxs primary  p-l-20 p-r-20" type="primary"
									@tap="onCopy(delivery.consignee+ ',' + delivery.mobile+ ',' + delivery.delivery_address)">复制</button></view>
						</view>
						
						<view class="flex">
							<view class="row_text">发货时间：</view>
							<view>{{delivery.create_time}}</view>
						</view>
						
					</view>
				</view>
			</view>
		</view>
		<view v-else>
			<view class="no-address flex-col col-center">
				<image class="img-null mt20" src="/static/images/news_null.png"></image>
				<view class="sm muted">
					<view>暂无数据</view>
				</view>
			</view>
		</view>
		<tabbar></tabbar>
	</view>
</template>

<script>
	import {
		getDeliveryList,
		addMyOrderGoods
	} from '@/api/user';
	import {
		mapGetters
	} from 'vuex';
	import {
		loadingType
	} from '@/utils/type';
	import {copy} from '@/utils/tools'
	import {
		DISTRIBUTION,
		DISTRIBUTIONID,
		INVITE_CODE
	} from '@/config/cachekey';
	import Cache from '@/utils/cache';
	export default {
		data() {
			return {
				order_id: 0,
				isShowLoadingView: true,
				item_id: 0,
				imgMood: 'aspectFit',
				goods_factory_code: '',
				actionText: "识别",
				showArc: false,
				goodsDetail: {},
				service_type: 0,
				arcAid: 0,
				goodsValue: '',
				imgUrl: `${this.$imgUrl}`,
				upOption: {
					auto: false,
					empty: {
						icon: `${this.$imgUrl}/wechat/static/images/goods_null.png`,
						tip: "暂无商品",
					}
				},
				menuButtonInfo: {},
				keyword: '',
				status: loadingType.LOADING,
				page: 1,
				sortConfig: {
					goodsType: 'double',
					priceSort: '',
					saleSort: '',
				},
				count: 0,
				deliveryList: [],
			};
		},
		onLoad(options) {
			// #ifdef MP-WEIXIN
			this.getMenuButtonInfo()
			// #endif
			// this.onSearch = trottle(this.onSearch, 500, this);
			this.init(options);
			// this.isShowLoadingView = true;
		},
		onShow() {
			const {
				id,
			} = this.$Route.query
			this.order_id = id,
				this.getGoodsDetailFun();
		},
		computed: {
			...mapGetters(['sysInfo'])
		},
		methods: {
			jumpGoods(item) {
			    this.$Router.push({
			        path: '/pages/goods_details/goods_details?id=',
			        query: {
			            id: item.goods_id
			        }
			    })
			},
			onCopy(text) {
				console.log(text);
				copy(text);
			},
			openExternalLink(ref_url) {
				this.$Router.push({
					path: '/pages/webview/webview',
					query: {
						url: ref_url
					}
				})
			},
			getMenuButtonInfo() {
				this.menuButtonInfo = uni.getMenuButtonBoundingClientRect()
				// this.menuButtonInfo.pos_top_height =  this.menuButtonInfo.top;
				this.menuButtonInfo.pos_logo_top_height = '20';
			},

			goPage(url) {
				this.$Router.push({
					path: url,
				})
			},
			goServicePage(goodsDetail, service_type) {
				if (service_type == 1) {
					this.$toast({
						title: "暂未开通，敬请期待",
					});
					return;
				}
				this.$Router.push({
					path: '/bundle/pages/circulate/apply',
					query: {
						service_type: service_type,
						item_id: goodsDetail.item_id
					}
				})
			},
			previewImage(imageUrl) {
				uni.previewImage({
					imageUrl,
					urls: [imageUrl] // 需要预览的图片http链接列表
				});
			},
			async getGoodsDetailFun() {

				const {
					data,
					code
				} = await getDeliveryList({
					order_id: this.order_id
				});
				if (code == 1) {
					this.isShowLoadingView = false;
					this.deliveryList = data;
					console.log('------deliveryList------------------------------');
					console.log(this.deliveryList);
					console.log(this.deliveryList.length);
				} else {
					this.deliveryList = [];
					// this.isNull = true
					this.isShowLoadingView = false;
				}
			},
			popAgreement(goodsDetail, service_type) {
				if (service_type == 1) {
					this.arcAid = 110; //弹出的文档ID
				} else if (service_type == 2) {
					this.arcAid = 120; //弹出的文档ID
				}
				this.goodsDetail = goodsDetail;
				this.showArc = true;
				this.service_type = service_type; //1:清洗服务;2羽绒回收
			},
			hidePopMask() {
				this.showArc = false;
			},
			getScanCodeResult(res) {
				this.goodsValue = res;
				this.actionText = '查询';
				this.isShowLoadingView = true;
				console.log('============getScanCodeResult==========-----------');
				this.getGoodsDetailFun();
			},
			clear() {
				this.goodsValue = "";
				this.actionText = '识别';
			},
			inputChange() {
				this.actionText = '查询';
			},
			downCallback() {
				this.onRefresh()
			},

			onChange(e) {
				this.keyword = e.value
			},
			init(option) {
				const {
					id
				} = this.$Route.query
				this.order_id = id
			},

			onChangeKeyword(item) {
				this.keyword = item
				this.showHistory = false
				this.onRefresh();
			},
		}
	};
</script>
<style lang="scss">
	page {
		height: 100%;
		padding: 0;
	}

	.primary-border {
		border: $-primary-border;
	}

	.primary-color {
		color: $-color-primary;
	}

	.view_box {
		margin-left: 20rpx;
		margin-right: 20rpx;
		margin-bottom: 60rpx;
	}

	.goods_info {
		border: $-color-border-light;
		border-radius: 20rpx;
		// padding: 20rpx;
		// background-color: $u-bg-color;
		margin-bottom: 30rpx;
	}

	.member_box1 {
		display: flex;
		flex-direction: column;
		position: relative;
		padding-right: 10rpx;
		padding-left: 10rpx;
		top: 30rpx;
		padding-bottom: 60rpx;
		margin-bottom: 120rpx;

		.header {
			display: flex;
			justify-content: center;
			align-items: center;
			margin-bottom: 30rpx;
			margin-top: 20rpx;

			.search {
				position: relative;
				z-index: 1;
			}
		}

		.content {
			display: flex;
			flex-direction: column;
			padding-bottom: 20rpx;
			border-bottom: 1px dotted #E5E5E5;
			.goods{
				margin-bottom: 20rpx;
			}

			.info_title {
				display: flex;
				flex-direction: column;
				line-height: 60rpx;
				// align-items: flex-start;
				.title{
					line-height: 50rpx;
					margin-bottom: 10rpx;
				}
				.spec_value_str {
					font-size: small;
					color: $-color-muted;
				}
			}

			.bigImg {}

			// .usual-item-img{
			// 	display: block;
			// 	width: 500rpx;
			// 	height: auto !important;
			// 	overflow: visible;
			// }
		}

		.service_button {
			display: flex;
			flex-direction: column;
			margin-bottom: 30rpx;

			.line {
				width: 60%;
				margin-top: 20rpx;
			}
		}

		.search_button {
			margin-top: 30rpx;
		}

		.content {
			flex: 1;
			min-height: 0;

			.goods-list {
				overflow: hidden;
			}
		}

		.fixed-button {
			position: fixed;
			/* 固定在屏幕上 */
			bottom: 25%;
			/* 距离屏幕底部的距离 */
			right: 35rpx;
			/* 圆角，使其看起来更像一个圆形按钮 */
			z-index: 99;
			/* 提高层级，确保按钮在其他内容之上 */
			display: flex;
		}
	}
</style>